import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from '/@/App.vue'

import { setupComponents } from '/@/components/common'

import { setupCache } from '/@/cache'
import { setupApi } from '/@/api'
import { setupGraphql } from '/@/graphql'
import router, { setupRouter } from '/@/router'
import { useStore } from '/@/store'

// render katex
import { toPng } from 'html-to-image'

// import 'vfonts/Lato.css'
// import 'vfonts/FiraCode.css'

import {
  create,
  NButton,
  NButtonGroup,
  NIcon,
  NPopconfirm,
  NTag,
  NImage,
  NSpace
} from 'naive-ui'

import {
  Upload,
  Button,
  Space,
  Image,
  Popconfirm
} from '@arco-design/web-vue'

import '@arco-design/web-vue/lib/upload/style/index.css'
import '@arco-design/web-vue/lib/button/style/index.css'
import '@arco-design/web-vue/lib/space/style/index.css'
import '@arco-design/web-vue/lib/image/style/index.css'
import '@arco-design/web-vue/lib/popconfirm/style/index.css'

window.$_html2Image = toPng

;(async () => {
  const app = createApp(App)

  // enable cookie/ls
  setupCache(app)

  // enable store
  app.use(createPinia())

  // enable api
  setupApi(app)
  // enable grapql
  setupGraphql(app)

  // register router
  setupRouter(app)

  // register common components
  setupComponents(app)

  // register lib components
  app.use(create({
    components: [
      NIcon,
      NPopconfirm,
      NButton,
      NButtonGroup,
      NTag,
      NImage,
      NSpace
    ]
  }))

  app.use(Upload)
  app.use(Button)
  app.use(Space)
  app.use(Image)
  app.use(Popconfirm)

  await router.isReady()

  // mount message box before login
  app.mount('#app')

  // get userinfo
  try {
    await useStore().getUserInfo()
  } catch (err) {}

  window.$router = router

})()
